<template>
  <div class="work-calendar">
    <el-row type="flex" justify="end">
      <el-select v-model="currentYear" size="small" style="width: 120px" @change="dateChange">
        <el-option v-for="item in yearList" :key="item" :label="item" :value="item">{{ item }}</el-option>
      </el-select>
      <el-select v-model="currentMonth" size="small" style="width: 120px;margin-left:10px" @change="dateChange">
        <el-option v-for="item in 12" :key="item" :label="item" :value="item">{{ item }}</el-option>
      </el-select>
    </el-row>
    <el-calendar v-model="currentDate">
      <template slot="dateCell" slot-scope="{date,data}">

        <div class="calendar-contain">

          {{ date.getDate() }}
          <span v-if="date.getDay()===6||date.getDay()===0">休</span>
          <p v-if="data.isSelected">加班</p>
        </div>
      </template>
    </el-calendar>
  </div>
</template>

<script>
export default {
  props: {
    startDate: {
      type: Date,
      default: () => new Date()
    }
  },
  data() {
    return {
      currentMonth: null, // 当前月份
      currentYear: null, // 当前年份
      currentDate: new Date(),
      yearList: []
    }
  },
  created() {
    // 当前月份
    this.currentMonth = new Date().getMonth() + 1
    const year = new Date().getFullYear()
    this.currentYear = year
    // 获取长度为十一个数组
    const yearArray = Array(11).fill('')
    this.yearList = yearArray.map((item, index) => year - 5 + index)
  },
  methods: {
    dateChange() {
      this.currentDate = this.currentYear + '-' + this.currentMonth
    }
  }
}
</script>

<style scoped lang='scss'>
::v-deep .el-calendar__header{
  display: none !important;
}
::v-deep .el-calendar-table td{
  border: none;
  text-align: center;
}
::v-deep .el-calendar-table tr td:first-child{
  border: none;
}
.calendar-contain {
display: flex;
align-items: center;
justify-content: center;
height: 85px;
span{
background-color: #bfa;
line-height: 30px;
border-radius: 50%;
height: 30px;
width: 30px;
color: orange;

}
}
</style>
